<template>
	<view class="page_bg_FAFAFA">
		<view class="my-top">
			<view class="userinfo-box flex justify-between align-center">
				<view class="flex align-center">
					<view class="avatar">
						<image :src="`https://www.worldintek.com:39011/yaolexue-service/${userInfo.icon}`" class="w-91 h-91 border-circle"></image>
					</view>
					<view class="mar-left18">
						<view class="font_w600 font_s32 cr-fff line-height100">
							{{ userInfo.name || '未登录'}}
						</view>
						<view v-if="userInfo.level" class="cr-fff font_s24 font_w500 line-height100 mar-top18">
							段位：{{userInfo.gradeLevelName}}
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<image @click="$jumpUrl('/pages/UserMessage/UserMessage')" src="https://www.worldintek.com:39011/yaolexue-service/icon_message.png" class="w-44 h-44 mar-right15">
					</image>
					<image @click="$jumpUrl('/pages/fillInfo/fillInfo')" src="https://www.worldintek.com:39011/yaolexue-service/icon_fb.png"
						class="w-44 h-44 mar-right15"></image>
					<image @click="$jumpUrl('/subPages/qrcodeCard/qrcodeCard')" src="https://www.worldintek.com:39011/yaolexue-service/icon_QR.png"
						class="w-44 h-44 mar-right15"></image>
					<image @click="$jumpUrl('/pages/userInfo/userInfo')" src="https://www.worldintek.com:39011/yaolexue-service/icon_setting.png"
						class="w-44 h-44"></image>
				</view>
			</view>
			<view class="flex justify-around mar-top45 padd-left31 padd-right31">
				<view class="font_s32 cr-fff font_w400 flex1 flex justify-center"
					@click="$jumpUrl('/pages/CollectHome/CollectHome')">
					收藏
				</view>
				<view class="font_s32 cr-fff font_w400 flex1 flex justify-center" @click="$jumpUrl('/pages/Like/Like')">
					点赞
				</view>
				<view class="font_s32 cr-fff font_w400 flex1 flex justify-center"
					@click="$jumpUrl('/pages/Subscribe/Subscribe')">
					订阅
				</view>
				<view class="font_s32 cr-fff font_w400 flex1 flex justify-center"
					@click="$jumpUrl('/pages/BrowsingHistory/BrowsingHistory')">
					历史
				</view>
			</view>
		</view>
		<view class="credit-box">
			<view class="credit-num">
				{{userInfo.score || 0}}学分
			</view>
			<view class="flex justify-between mar-top29">
				<navigator url="/subPages/creditTask/creditTask" hover-class="" class="flex flex-direction justify-center align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_jifen.png" class="w-63 h-63"></image>
					<view class="font_s28 cr-333 font_w500 mar-top13 line-height100">
						学习积分
					</view>
				</navigator>
				<navigator url="/subPages/myAnswer/myAnswer" hover-class=""
					class="flex flex-direction justify-center align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_daan.png" class="w-63 h-63"></image>
					<view class="font_s28 cr-333 font_w500 mar-top13 line-height100">
						我要答题
					</view>
				</navigator>
				<navigator url="/subPages/creditReport/creditReport" hover-class="" class="flex flex-direction justify-center align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_baobiao.png" class="w-63 h-63"></image>
					<view class="font_s28 cr-333 font_w500 mar-top13 line-height100">
						学习报表
					</view>
				</navigator>
			</view>
		</view>
		<view class="menu-box">
			<view class="menu-item" @click="$jumpUrl('/subPages/creditMall/creditMall')">
				<view class="flex align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_jfsc.png" class="w-38 h-38"></image>
					<view class="font_s26 cr-666 mar-left11">
						学分商城
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="menu-item" @click="$jumpUrl('/subPages/ylxService/ylxService')">
				<view class="flex align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_api_server.png" class="w-38 h-38"></image>
					<view class="font_s26 cr-666 mar-left11">
						药乐学服务
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view @click="signShow = true" class="menu-item">
				<view class="flex align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_qd.png" class="w-38 h-38"></image>
					<view class="font_s26 cr-666 mar-left11">
						签到服务
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view @click="$jumpUrl('/pages/certificateShow/certificateShow')" class="menu-item">
				<view class="flex align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_gjx.png" class="w-38 h-38"></image>
					<view class="font_s26 cr-666 mar-left11">
						证书记录 
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view @click="$jumpUrl('/pages/toolbox/toolbox')" class="menu-item">
				<view class="flex align-center">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_gjx.png" class="w-38 h-38"></image>
					<view class="font_s26 cr-666 mar-left11">
						工具箱
					</view>
				</view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="more-box">
			<view class="cr-333 font_s30 font_w600">
				帮助与反馈
			</view>
			<view class="flex justify-between mar-top35">
				<navigator url="/pages/message/message" hover-class="" class="flex flex-direction align-center flex1">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_fk.png" class="w-50 h-50"></image>
					<view class="line-height100 font_s26 cr-333 font_w400">
						留言
					</view>
				</navigator>
				<view class="flex flex-direction align-center flex1">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_fk.png" class="w-50 h-50"></image>
					<view class="line-height100 font_s26 cr-333 font_w400">
						服务电话
					</view>
				</view>
				<navigator url="/pages/userDoc/userDoc" hover-class="" class="flex flex-direction align-center flex1">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_fk.png" class="w-50 h-50"></image>
					<view class="line-height100 font_s26 cr-333 font_w400">
						使用手册
					</view>
				</navigator>
				<navigator url="/pages/platformInfo/platformInfo" hover-class=""
					class="flex flex-direction align-center flex1">
					<image src="https://www.worldintek.com:39011/yaolexue-service/icon_fk.png" class="w-50 h-50"></image>
					<view class="line-height100 font_s26 cr-333 font_w400">
						平台信息
					</view>
				</navigator>
			</view>
		</view>
		<u-popup :show="signShow" mode="center" :round="10" @close="close" :safeAreaInsetBottom="false">
			<view class="popup-bg flex flex-direction align-center justify-center">
				<text class="cr-333 font_s28">每日签到</text>
				<image src="/static/img/sign.png" class="sign-img mar-top33 mar-bottom36"></image>
				<view v-if="userInfo.checkInFlag == 0" @click="clickSign" class="sign-btn">签到</view>
				<view v-else class="signsuccess">签到成功</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					score: 0,
					name: '',
					level: '',
				},
				signShow:false
			};
		},
		onShow(query) {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				return this.$http.get('/yaolexue-service-portal/sysPortalUser/portalUserInfo').then(res => {
					// console.log('my', res.data);
					this.userInfo = res.data
					getApp().globalData.userInfo = res.data
					uni.setStorageSync('userInfo', res.data)
				})

			},
			clickSign(){
				this.$http.post('/yaolexue-service-portal/sysPortalUser/checkIn',{
					
				}).then(res => {
					if(res.code == 200){
						uni.showToast({
							title:'签到成功',
							icon:'none'
						})
						this.getUserInfo()
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			close(){
				this.signShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-top {
		width: 100%;
		height: 344rpx;
		background: #FA312A;

		.userinfo-box {
			padding: 40rpx 32rpx 0 32rpx;

			.avatar {
				width: 91rpx;
				height: 91rpx;
				background: #ABABAB;
				border-radius: 50%;
			}
		}
	}

	.credit-box {
		margin: -95rpx auto 0 auto;
		width: 650rpx;
		height: 250rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 32rpx;

		.credit-num {
			height: 85rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #F9382D;
			border-bottom: 1rpx solid rgba(240, 240, 240, 0.8);
			display: flex;
			align-items: center;
			box-sizing: border-box;
		}
	}

	.menu-box {
		width: 689rpx;
		background: #FFFFFF;
		margin: 20rpx auto;
		padding: 0 19rpx;

		.menu-item {
			width: 100%;
			height: 95rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&:not(:last-child) {
				border-bottom: 1rpx solid rgba(240, 240, 240, 0.8);
			}
		}
	}

	.more-box {
		width: 689rpx;
		background: #FFFFFF;
		padding: 32rpx 22rpx;
		margin: 0 auto 32rpx auto;
	}
	.popup-bg{
		width: 650rpx;
		height: 376rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
	}
	.sign-img{
		width: 146rpx;
		height: 159rpx;
	}
	.sign-btn{
		width: 248rpx;
		height: 63rpx;
		background: #FA312A;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.signsuccess{
		width: 248rpx;
		height: 63rpx;
		background: #C5C5C5;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center; 
	}
</style>